/*
ProFolio vcard
Copyrights- istoredesigns.com - PremiumFreebies.eu
made by: Oussama Afellad

July - 2011
*/

@import "reset.css";

/*----------------------------------General Styles----------------------------------*/

a{color:#F7941E;}
p{padding:10px 15px 0 0;color:#777;text-shadow:1px 1px 1px #fff;line-height:16px; font-size:11px}
p img{background:#eee; border:5px solid #e6e6e6; float:left;margin:0 10px 10px 0}
h1{
	color:#555;
	font-size:17px;
	font-weight:normal;
	text-shadow:1px 1px 1px #fff
}
h2{color:#636363;font-size:19px;font-weight:normal; margin-left:12px;text-shadow:1px 1px 1px #fff;padding:0;margin-bottom:15px}

ul,ol{margin-top:10px;}
ul li,ol li{
	float:left;
	margin-left:10px;
	color:#777;
	text-shadow:1px 1px 1px #fff;
	line-height:15px;
}
ol li{list-style-type:lower-alpha}
li span{display:block}
.li-moreinfo{padding:5px 0 5px 0;color:#777;text-shadow:1px 1px 1px #fff;list-style:none}
hr{height:2px;border:none;background:url(../images/vcard/hr.gif) repeat-x;margin:0 30px}
hr.spacer{clear:both;height:25px;background:none}
input{font-family:Arial;padding:8px 0 8px 5px;margin:0 0 10px 0;width:420px;background:#fff;border:1px solid #dbdbdb;color:#999;font-size:13px;display:block;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
textarea{font-family:Arial;padding:8px 0 8px 5px;margin:0 0 10px 0;width:420px;background:#fff;border:1px solid #dbdbdb;color:#999;font-size:13px;display:block;height:45px;resize:none;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
.clear{clear:both}
.clearpx{height:1px}
.spacer{height:15px}
.small{position:absolute;font-size:11px;color:#777;padding-top:4px}
.small a{color:#777;text-decoration:none}
.pagetitle{display:none}
.nopadding{padding:0}

/*----------------------------------Items----------------------------------*/
#wrapper{
	width:400px;
	height:300px
}
#vcard{display:none;z-index:2;position:relative;margin:auto;width:700px;height:450px;background:url(../images/Vcard-1.png) no-repeat;-webkit-box-shadow:0 0 0px #000;-moz-box-shadow:0 0 0px #000;box-shadow:0 0 0px #000}





.main{
	float:right;
	width:520px;
	background:url(../images/vcard/sidebar.png) repeat-y;
	padding-left:20px
}
.sidebar{float:left;margin:0px;width:170px;height:240px;}
.button{padding:6px 8px; text-transform:uppercase;font-size:10px; font-weight:bold; text-decoration:none;}
.button:hover{color:#777;
	
}

/*----------------------------------Header----------------------------------*/
#header{
	margin:10px 30px 0 30px;
	height:70px
}
#header .profilepicture{float:left}
#header .profilepicture img{width:80px;height:80px}
#header #logo{
	float:left;
	text-indent:-9999px;
	background:url(../images/logo-01-01.png) no-repeat;
	width:300px;
	height:70px
}
#header ul#menu{float:right;height:45px;margin:14px 20px 0 0;padding:0 15px 0 0;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
#header ul#menu li{float:left;padding:16px 0 0 15px;font-weight:bold;font-size:13px;text-transform:uppercase;color:#999;text-shadow:1px 1px 1px #fff;list-style:none}
#header ul#menu li a{color:#999;text-decoration:none}
#header ul#menu li a:hover{
	color:#414042;
	border-bottom:2px solid #e3e3e3;
	border-margin:10px;
}
#header ul#menu li.active a{
	color:#F7941E;
}

/*----------------------------------Content----------------------------------*/
#content{position:relative;margin:25px 20px 0 50px;height:240px;overflow:hidden; width:615px;}
#scroller{position:relative;height:240px}
#scroller .contentitem{
	width:710px;
	height:240px;
	float:left;
	display:none;
	margin-right:30px
}

/*----------------------------------Skills----------------------------------*/
ul.skills{margin:10px 0 0 0}
ul.skills li{padding:15px 10px 14px 0;border-bottom:1px solid #ddd;color:#888;text-shadow:1px 1px 1px #fff;list-style:none}
ul.skills li:last-child{border-bottom:none}
ul.skills li .topic{float:left;width:160px;font-weight:bold;color:#777;font-size:14px;text-shadow:1px 1px 1px #fff;height:7px}
ul.skills li .stars{float:left;width:120px}

/*----------------------------------Work----------------------------------*/
#workmask{width:710px;height:185px;position:relative;margin-top:25px;overflow:hidden}
#workscroller{width:710px;position:absolute;margin-top:0}
.work-item-preview {display:block;background:url(../images/vcard/bg-fade.png) no-repeat center center;}
ul.work{margin-top:0}
ul.work a{color:#4d4d4d}
ul.work li{padding:0;position:relative;float:left;display:block;list-style:none;width:225px;height:85px;margin:0 15px 15px 0;background:url(../images/vcard/workbg.png);overflow:hidden}
ul.work li a{text-decoration:none}
ul.work li.last{margin:0 0 15px 0}
ul.work li .worktitle{font-family:Verdana;position:relative;margin:-55px 0 0 0;margin:0 0 0 0;padding:10px 7px 7px 7px;width:211px;height:14px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;background:#dedede;font-weight:bold;font-size:13px;text-transform:uppercase;list-style:none}
ul.work li img{width:225px;height:85px;overflow:hidden}
ul.navigation{float:right;margin:5px 0 0 0}
ul.navigation li{float:left;margin-left:5px;padding:3px 5px 3px 6px;background:#ddd;color:#777;font-weight:bold;text-shadow:1px 1px 1px #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; list-style:none; cursor:pointer}
ul.navigation li.active{background:#ccc;color:#555;text-shadow:1px 1px 1px #eee;border:none;padding:3px 6px 4px 6px}
ul.navigation li:hover{background:#ccc;border:none;padding:3px 6px 4px 6px}

/*----------------------------------Networks----------------------------------*/
ul.networks li{float:left;width:224px;height:38px;padding:15px 25px 15px 0;list-style:none;cursor:pointer}
ul.networks .last{width:186px}
ul.networks li a{text-decoration:none}
ul.networks li .background{width:210px;height:42px;background:url(../images/vcard/networksbg.png);position:absolute;display:none}
ul.networks li .content{position:absolute;display:block;z-index:2;margin:6px 0 0 0}
ul.networks li img{float:left;padding-right:8px;width:32px;height:32px;border:0}
ul.networks li .title{float:left}
ul.networks li .title .sname{color:#555;font-size:15px;text-shadow:1px 1px 1px #fff;height:7px;font-weight:bold}
ul.networks li .title .surl{clear:both;color:#888;font-size:11px;margin:0;padding:0;text-shadow:1px 1px 1px #fff}
ul.networks li p{color:#999;font-size:11px;margin:0;padding:0}

/*----------------------------------Contact----------------------------------*/
.contact .sendbutton{float:right;width:auto;padding:4px 20px;background:#cfcfcf;color:#858585;text-shadow:1px 1px 1px #fff;border:none;text-transform:uppercase;font-weight:bold;font-size:10px;cursor:pointer}
.contact .error{background:#feeded;border-color:#fcd5d5}
#email_form{
	width:427px;
	float: left;
}
#email_send{margin-top:25px;width:427px;display:none}


ul.slider{list-style:none;margin:0;padding:0}ul.slider li{float:left;width:100%;border-bottom:1px #d1d1d1 dotted;padding-bottom:5px;margin-bottom:10px}.bx-prev,.bx-next{background:url(../images/slider_btn.png) no-repeat left 0;width:12px;height:16px;right:20px;top:-68px;position:absolute;text-indent:-999999px}.bx-prev:hover{background:url(../images/slider_btn.png) no-repeat left -16px}.bx-next{background:url(../images/slider_btn.png) no-repeat right 0;right:0}.bx-next:hover{background:url(../images/slider_btn.png) no-repeat right -16px}
.progress{
	float:left;
	clear:both;
	position:relative;
	width:180px;
	margin-bottom:15px
}.progress h4{
	font-size:11px;
	margin-bottom:5px
}


.progressBar{
	position:relative;
	top:1px;
	background:url(../images/progressbar_bg_8.png) repeat-x right bottom;
	width:179px;
	height:8px;
	float:left;
	text-align:center;
	font-size:10px;
	border-left:1px #929292 solid
}.progressValue{position:relative;background:url(../images/progressbar_180_8.png) no-repeat right bottom;width:180px;height:8px;left:0;top:0}.progressValue span{position:relative;top:-5px;text-align:center;font-weight:bold;font-size:9px;color:#fff;display:none}.progress .text{position:absolute;top:4px;margin-left:55px}p#vtip{display:none;position:absolute;padding:5px 15px;left:15px;top:-120px;font-size:11px;font-weight:bold;background-color:white;border:1px solid #b5b5b5;z-index:9999}.ribbon{background:url(../images/ribbon.png) no-repeat top right;position:absolute;width:151px;height:151px;top:-17px;left:1px}.left{float:left}.right{float:right}.grayscale span{width:32px;height:32px;overflow:hidden;display:block;float:right;margin-left:5px}.clear{clear:both;overflow:hidden}
.grid_4{
	margin-right:30px;
	width:180px
}
.title{
	margin-top:0px;
	font-size:13px;
	color:#505050;
}.description1,.description2{
	font-size:11px;
	color:#777;
}.description2{color:#c0c0c0;font-style:italic}

.grayscale span{width:32px;height:32px;overflow:hidden;display:block;float:right;margin-left:5px}.clear{clear:both;overflow:hidden}
	
/*********************I scroller ******************/


/* Filterable Portfolio Stylesheet */


/* Simple Reset
------------------------------------------------------------ */



/* Import Fonts
------------------------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Quattrocento);


/* Custom Classes
------------------------------------------------------------ */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */


/* General Styles
------------------------------------------------------------ */



/*********************** I Scrooler End**************/

#contactRIGHT{
	float:left;
}
